<template>
  <el-container
    :direction="JudgmentLayout()"
    :style="{ paddingBottom: containerChange ? 0 : '50px' }"
  >
    <draggable-list :widget="widget"></draggable-list>
  </el-container>
</template>

<script setup>
import draggableList from "@/components/draggableList.vue";
import eventBus from "@/components/eventBus";
import { ref, onUnmounted } from "vue";

defineOptions({
  name: "containerWidget",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
});

let containerChange = ref(0);

eventBus.on("containerChange", (msg) => {
  containerChange.value = msg;
});

onUnmounted(() => {
  eventBus.off("containerChange");
});

// 判断布局模式
let JudgmentLayout = () => {
  let wList = $props.widget.widgetList;
  return wList.some((item) => item.type == "header" || item.type == "footer")
    ? "vertical"
    : "horizontal";
};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  background: #b3e19d;
  padding-bottom: 3px;
}
</style>
